<template>
	<view class="container">
		<view :style="[{paddingTop: StatusBar + 'px', background: '#fff'}]"></view>
		<view class="bg-f padding-24 flex align-center">
			<text class="cuIcon-back flex-shrink" style="font-size: 44rpx;color: #7f7f7f;margin-right: 24rpx;" @click="back"></text>
			<view class="search-box flex align-center flex-1">
				<image src="../../../static/images/search-c2.png" class="search-icon flex-shrink"></image>
				<input placeholder="搜索知识" placeholder-class="ipt-pla" class="ipt flex-1" v-model="inputVal" @confirm="headleSearch" />
			</view>
		</view>
		<view class="padding-lr-24 padding-tb-12 fs-28 color-a">找到{{total}}条知识</view>
		<view class="zs-list">
			<view class="bg-f padding-24 margin-b-24" @click="navTo(`/pages/knowledge/detail/index?title=${item.knName}&id=${item.knId}`)" v-for="(item, index) in list" :key="index">
				<view class="flex align-center justify-between margin-b-24">
					<view class="fs-30 title text-ellipsis text-bold">{{item.knName}}</view>
					<text class="flex-shrink color-a fs-26">{{item.createTime}}</text>
				</view>
				<view class="flex align-center">
					<!-- <image src="../../../static/images/no-img.png" mode="aspectFill" class="img flex-shrink margin-r-24"></image> -->
					<image v-if="item.fileCodeUrl" :src="`${read_url}${item.fileCodeUrl}`" mode="aspectFill" class="img flex-shrink margin-r-24"></image>
					<view class="fs-28 text-cut-3 flex-1 color-9" style="line-height: 1.5;" v-html="item.faultSolution"></view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" v-if="total > 5"></uni-load-more>
		
		<!-- 空数据显示 -->
		<fu-empty-ui v-if="total == 0 && isInit"></fu-empty-ui>
	</view>
</template>

<script>
	import {
		READ_FILE_URL
	} from '@/common/config.js';
	export default {
		data() {
			return {
				page: 1,
				list: [],
				isInit: false,
				status: 'more',
				inputVal: '',
				total: 0,
				StatusBar: this.StatusBar,
				read_url: READ_FILE_URL
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			this.status = 'more';
			this.page = 1;
			this.getList();
		},
		onReachBottom() {
			if (this.status == 'more') {
				this.getList();
			}
		},
		methods: {
			navTo(path) {
				uni.navigateTo({
					url: path
				})
			},
			back() {
				uni.navigateBack()
			},
			headleSearch() {
				this.status = 'more';
				this.page = 1;
				this.getList();
			},
			async getList() {
				if (this.status != 'more') return;
				this.status = 'loading';
				await uni.request({
					url: 'http://150.158.40.124:9001/apiv1/knowledge/base/queryVKnowledgeBaseListByPage',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						'Authorization': global.token || ''
					},
					data: {
						modelCode: 'com.xframe.domain.knowledgeBase.VKnowledgeBase',
						queryKey: 'default',
						ver: "v1",
						refList: ["ALL"],
						sortDir: 'DESC',
						sortName: 'updateTime',
						pageIndex: this.page,
						pageSize: 10,
						recordCountFlag: 'true',
						conditions: [
							{
								keyName: 'knCode',
								op: 'LIKE',
								val: this.inputVal,
								gName: 'a'
							},
							{
								keyName: 'knName',
								op: 'LIKE',
								val: this.inputVal,
								gName: 'a'
							},
							{
								keyName: 'workOrderCode',
								op: 'LIKE',
								val: this.inputVal,
								gName: 'a'
							},
							{
								keyName: 'emName',
								op: 'LIKE',
								val: this.inputVal,
								gName: 'a'
							}
						]
					},
					success: res => {
						if (res.data.code == 200) {
							let total = res.data.data.recordCount
							this.total = total
							let data = res.data.data.dataList || []
							if (this.page == 1) this.list = [];
							this.list = this.list.concat(data)
							if (this.list.length < total) {
								this.status = 'more';
								this.page++;
							} else {
								this.status = 'noMore';
							}
						}
						this.isInit = true;
						uni.stopPullDownRefresh();
					},
					complete() {
						uni.stopPullDownRefresh();
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f3f5f8;
	}
	.search-box {
		padding: 12rpx 28rpx;
		background-color: rgba(242, 242, 242, 1);
		border-radius: 50rpx;
		.search-icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 12rpx;
		}
		.ipt-pla {
			color: #c0c0c0;
		}
		.ipt {
			font-size: 26rpx;
		}
	}
	.zs-list {
		.title {
			color: rgba(51, 51, 51, 0.8);
		}
		.img {
			width: 150rpx;
			height: 150rpx;
		}
	}
</style>